<template>
	<view class="content">
		<view class="logo">
			<image src="../../../static/img/logo.png"></image>
		</view>
		<view class="table">
			<view class="table-nik">
				<view>
					<view class="phone">
						<image src="../../../static/img/sjhsr.png"></image>
						<input type="text" v-model="phone" placeholder="请输入手机号">
					</view>
					<view class="securityCode">
						<image src="../../../static/img/yzmsrhui.png"></image>
						<input type="text" placeholder="请输入验证码" v-model="security">
						<view :class="!forbidden?'getCode':'getCode2'" @click="getSecurityCode"><span>{{ forbidden ? "重新获取验证码 "+time+"s" : "获取验证码"}}</span></view>
					</view>
				</view>
				<view class="commit">
					<u-button type="primary" class="commitButton" shape="circle"  hover-class="none" @click="setLogon">登录</u-button>
				</view>
			</view>
		</view>
		<!-- <view class="bottomImg">
			<image src="../../static/img/dlydb.png"></image>
		</view> -->
	</view>
</template>

<script>

import restApi from "../../../lib/restapi";
import IMService from "../../../lib/imservice";
export default {
	data() {
		return {
			time: 60,
			forbidden: false,
			phone: undefined,
			security: undefined
		}
	},
	methods:{
		setUrl(url){
			uni.navigateTo({
				url: url
			})
		},
		testPhone(str) {
			const reg = /^1[3|4|5|7|8|6|9][0-9]\d{8}$/;
			return reg.test(str);
		},
		setLogon(){
			let self = this;
			if (!self.phone) {
				uni.showToast({
					title: '手机号不能为空',
					duration: 2000,
					icon: 'none'
				});
				return false;
			}
			if (!self.testPhone(self.phone)) {
				uni.showToast({
					title: '手机号错误，请重新输入',
					duration: 2000,
					icon: 'none'
				});
				return false;
			}
			if (!self.security) {
				uni.showToast({
					title: '验证码不能为空',
					duration: 2000,
					icon: 'none'
				});
				return false;
			}
			uni.request({
				url:self.commonApi.loginSms,
				method:"POST",
				data:{
					phone: self.phone,
					code: self.security
				},
				success(res) {
					uni.setStorageSync('token', res.data.data.token);
					uni.setStorageSync('uid', res.data.data.uid);
					uni.showToast({
						title:'登录成功',
						duration:500,
						icon:'none'
					})
					setTimeout(()=>{
						uni.navigateBack({
							delta: 1
						})
					},500)
					uni.setStorageSync('login', true);
					uni.setStorageSync('tips',1)
					uni.setStorageSync('PetTips',1)
					self.forbidden = false
					self.time = 60
					self.getUserInfo()
					self.setmaster()
					
				},
				fail(error) {
					uni.showToast({
						title:error.msg+'',
						duration:500,
						icon:"none"
					})
				}
			})
		},
		
		findUser(username, password) {
			let data = uni.getStorageSync('masterList')
			let dataList = JSON.parse(data)
			let reData = {}
			dataList.forEach(item=>{
				if(item.name == username && item.password == password){
					reData = {
						uuid: item.uuid,
						avatar: item.avatar,
						name: item.name
					}
				}
			})
			return reData
		},
		getUserData(){
			let name = uni.getStorageSync('userData')
			let user = this.findUser(name.nickname, '123');     //模拟登录
			if(user){
				uni.setStorageSync('currentUser', user);
			}
			let currentUser = uni.getStorageSync('currentUser');
			if(this.goEasy.getConnectionStatus() === 'disconnected') {
				getApp().globalData.imService= new IMService(this.goEasy,this.GoEasy);
				getApp().globalData.imService.connect(currentUser);
			}
			uni.showLoading();
			//监听会话列表变化
			let self = this;	
			this.goEasy.im.on(this.GoEasy.IM_EVENT.CONVERSATIONS_UPDATED, (content) => {
				self.renderConversations(content);
			});
			//加载会话列表
			this.goEasy.im.latestConversations({
				onSuccess: function (result) {
					let content = result.content;
					self.renderConversations(content);
					uni.hideLoading();
				},
				onFailed: function (error) {
					//获取失败
					uni.hideLoading()
					console.log("失败获取最新会话列表, code:" + error.code + " content:" + error.content);
				}
			});
		},
		setmaster(){
			let self = this
			self.$request(self.commonApi.infoChat,'GET').then(res=>{
				uni.setStorageSync('masterList',JSON.stringify(res.data.data))
			})
		},
		getUserInfo(){
			let self = this
			let uid = uni.getStorageSync('uid')
			self.$request(self.commonApi.userInfo+uid,'GET').then(res=>{
				uni.setStorageSync('userData', res.data.data);
				let data = {
					avatar: res.data.data.avatar,
					name: res.data.data.nickname,
					uuid: uid
				}
				setTimeout(()=>{
					self.getUserData()
				},1500)
			})
		},
		
		getSecurityCode(){
			if (!this.phone) {
				uni.showToast({
					title: '手机号不能为空',
					duration: 2000,
					icon: 'none'
				});
				return;
			}
			if (!this.testPhone(this.phone)) {
				uni.showToast({
					title: '手机号错误，请重新输入',
					duration: 2000,
					icon: 'none'
				});
				return;
			}
			if(!this.forbidden){
				uni.showLoading({
					title: '请稍等',
					mask: true,
				})
				let t = setInterval(()=>{
					if(this.time > 0){
						this.forbidden = true
						this.time -= 1
					}else{
						clearTimeout(t)
						this.time = 60
						this.forbidden = false
					}
				},1000)
				uni.request({
					url:this.commonApi.smsSend,
					method:"POST",
					data:{
						phone:this.phone
					},
					success(res) {
						uni.hideLoading()
					},
					fail(error) {
						uni.showToast({
							title:error.msg+'',
							duration:500,
							icon:"none"
						})
					}
				})
			}
		}
	}
};
</script>

<style lang="scss" scoped>
	.getCode2{
		min-width: 150rpx;
		height: 54rpx;
		border: 3rpx solid rgba(153, 153, 153, 0.2);
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 10rpx;
		font-size: 24rpx;
		color: rgba(153, 153, 153, 1);
		position: absolute;
		right: 0;
		span{
			padding: 0 10rpx;
		}
	}
	.bottomImg{
		width: 100%;
		height: 224rpx;
		position: fixed;
		z-index: 1;
		bottom: 0;
		left: 0;
		image{
			width: 100%;
			height: 224rpx;
		}
	}
	.commit /deep/ .u-size-default{
		height: 90rpx !important;
	}
	.commit /deep/ .u-size-default{
		border-color: #FFBB00;
		background-color: #FFBB00;
	}
	.commit{
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 60rpx 0;
		.commitButton{
			width: 100%;
		}
	}
	.securityCode{
		margin-top: 20rpx;
		width: 100%;
		display: flex;
		align-items: center;
		flex-direction: row;
		padding: 20rpx 0;
		border-bottom: 1rpx solid rgba(153, 153, 153, 0.2);
		position: relative;
		image{
			width: 28rpx;
			height: 32rpx;
			margin-right: 20rpx;
		}
		input{
			// width: calc(100% - 24px);
			width: 300rpx;
			height: 60rpx;
		}
		.getCode{
			min-width: 150rpx;
			height: 54rpx;
			border: 3rpx solid #FFBB00;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 10rpx;
			font-size: 24rpx;
			color: #FFBB00;
			position: absolute;
			right: 0;
			span{
				padding: 0 10rpx;
			}
		}
	}
	.phone{
		width: 100%;
		display: flex;
		align-items: center;
		flex-direction: row;
		padding: 20rpx 0;
		border-bottom: 1rpx solid rgba(153, 153, 153, 0.2);
		image{
			width: 28rpx;
			height: 32rpx;
			margin-right: 20rpx;
		}
		input{
			width: calc(100% - 24px);
			height: 60rpx;
		}
	}
	.table-nik{
		width: 600rpx;
		display: flex;
		justify-content: center;
		flex-direction: column;
	}
	.table{
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.logo {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 120rpx 0 60rpx 0;
		image {
			width: 240rpx;
			height: 240rpx;
			border-radius: 20rpx;
		}
	}
.content {
	width: 100%;
	display: flex;
	flex-direction: column;
}
</style>
